<template>
  <transition name="fade">
    <div v-show="loading" key="1" style="height: 100%; width: 100%; position: absolute; z-index: 999; top: 0; left: 0;">
      <div class="loading-mask">
        <div class="loader" style="display: block;">
          <div class="loader-inner box1"></div>
          <div class="loader-inner box2"></div>
          <div class="loader-inner box3"></div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: "LoadingMask",
  props : {
    loading : {
      type : Boolean,
      default : false
    }
  }
}
</script>
<style scoped>
.loading-mask {
  background: #F8F9FBE6 none repeat scroll 0 0;
  height: 100%;
  left: 0;
  opacity: 1;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader {
  border-radius: 50%;
  height: 100px;
  margin: 0 auto 0;
  perspective: 780px;
  position: relative;
  width: 100px;
}
.loader-inner {
  border-radius: 50%;
  box-sizing: border-box;
  height: 100%;
  position: absolute;
  width: 100%;
}
.loader-inner.box1 {
  animation: 1.15s linear 0s normal none infinite running cssload-rotate-one;
  border-bottom: 3px solid #00c7fc;
  left: 0;
  top: 0;
}
.loader-inner.box2 {
  animation: 1.15s linear 0s normal none infinite running cssload-rotate-two;
  border-right: 3px solid #00c7fc;
  right: 0;
  top: 0;
}
.loader-inner.box3 {
  animation: 1.15s linear 0s normal none infinite running cssload-rotate-three;
  border-top: 3px solid #00c7fc;
  bottom: 0;
  right: 0;
}
@keyframes cssload-rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}
@keyframes cssload-rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}
@keyframes cssload-rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}
@keyframes cssload-rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}
@keyframes cssload-rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}
@keyframes cssload-rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}
</style>
